<template>
  <div style="position: relative;">
    <transition-group name="left">
      <div v-show="visible" class="drawer drawerLeft" key="1">
        <div class="title">
          <span>安检通道开放情况</span>
          <el-button type="primary" class="newArea" @click="showAreaDialog">
            <el-icon>
              <Tools />
            </el-icon>
          </el-button>
        </div>
        <el-row :gutter="16">
          <el-col :span="12" style="margin-bottom: 30px;">
            <div style="width:105px;height:70px;margin-left:20px;padding-left:20px;cursor:pointer;"
              @click="openSecurity('open')" :class="{ 'checkBackground': isCheck, 'checkBackground1': !isCheck }">
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-right: 4px;margin-bottom: 4px;margin-top: 10px;" :size="30">
                  <Warning />
                </el-icon>
                <div style="margin-left: 40px;margin-bottom: 5px;" :class="{ 'checkFont': isCheck }">{{ openNum }}</div>
              </div>
              <div class="statistic-footer" style="margin-top: 0px;">
                <div class="footer-item">
                  <span>开放安检通道</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="width:105px;height:70px;padding-left:20px;cursor:pointer;" @click="closeSecurity('close')"
              :class="{ 'checkBackground': !isCheck, 'checkBackground1': isCheck }">
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-right: 4px;margin-bottom: 4px;margin-top: 10px;" :size="30">
                  <Warning />
                </el-icon>
                <div style="margin-left: 40px;margin-bottom: 5px;" :class="{ 'checkFont': !isCheck }">{{ closeNum }}</div>
              </div>
              <div class="statistic-footer" style="margin-top: 0px;">
                <div class="footer-item">
                  <span>关闭安检通道</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider style="width: 90%; margin: auto; padding: 0" />
        <div class="content" style="height:40px">
          <FilterBar ref="FilterSearchRef" :close-collapse="true" :hasButton="false" :filters="trolleyOptions"
            @on-toggle="(val: any) => $emit('on-toggle', val)" style="margin:20px 0" />
              <table-common :columns="securityColumns" :loading="loading" :pagination="false" :table-data="thresholdData"
              size="small" @current-change="changeCurrent" @size-change="changePageSize">
                <template #count="{ row }">
                   <span v-if="row.count >= areaName" style="color: rgb(243, 54, 54);display:inline-block;width:100%;cursor: pointer;" @click="getItem(row)">{{row.count }}</span>
                   <span v-else @click="getItem(row)" style="display: inline-block; width:100%;cursor: pointer;">{{ row.count }}</span>
                </template>
              <template #action="{ row }">
                <!-- 自定义操作栏示例  -->
                <el-button class="link-btn" @click="handleEdit(row)" link type="primary">查看</el-button>
              </template>
            </table-common>
        </div>
      </div>
         <img
          :class="visible == true ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
          :src="visible == true ? image.arrowLeft : image.arrowRight"
          key="2"
          style="float: left"
          @click="visible = !visible"
        />
      <el-radio-group v-model="layer" :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'">
        <el-radio-button v-for="area in areaDetail" :label="area.buildName" @change="showFloor(area.floorDesc)">
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="subLayer" v-if="hasSub" :class="visible == true ? 'btn_d subLayer' : 'btn_c subLayer'">
        <el-radio-button v-for="area in subLayers" :label="area.buildName" @change="switchMap(area.name)">
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>
      <div :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'" style="top: calc(90vh - 22px);">
        <span style="margin-right:10px; color:white;">热力图</span>
        <el-switch v-model="heating" class="ml-2" @click="drawHeatMap"/>
      </div>
      <div :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'" style="top: calc(8vh - 22px);">
        <div style="background:#fff;width:140px; border-radius:5px;float:left;cursor: pointer;"><el-button type="primary"
            style="margin-right:10px">
            <img :src="image.layer">
            </el-button>国内出发</div>
        <div style="background:#fff;width:200px; border-radius:5px;float:left;margin-left:20px; cursor: pointer;">
          <el-button type="primary" style="margin-right:10px">
            <img :src="image.layer">
            </el-button>国际及港澳台出发</div>
      </div>
    </transition-group>
    <!-- 右边弹出 -->
    <transition-group name="right">
      <div v-show="visibleRight" class="drawer drawerRight" key="1">
        <div class="title">
          <span>安检通道排队人数告警</span>
        </div>
        <div class="content" style="height:70px;">
          <FilterBar ref="FilterRef1" :close-collapse="true" :filters="tableOption" @search-change="onSearch"
            :table-data="tableData" @search-reset="onReset" has-button />
        </div>
        <el-divider style="width: 90%; margin: auto; padding: 0" />
        <div class="title">
          <div class="alamList">
            <div v-for="item in alamData" class="listDiv">
              <el-image style="width: 115px; height: 120px; border-radius: 8px; float: left" :src="item.path" />
              <div style="float: left; border: 0; width: 220px; margin-left: 10px">
                <div style="font-weight: bolder; font-size: 18px; line-height: 20px">{{ item.title }}</div>
                <div class="msg">告警区域：</div>{{ item.alamArea }}<br>
                <div class="msg">发生时间：</div>{{ item.time }}<br>
                <div class="msg">监控来源：</div>{{ item.source }}<br>
              </div>
            </div>
          </div>
        </div>
      </div>
          <img
          :class="visibleRight == true ? 'btn_f btnRight btn' : 'btn_e btnRight btn'"
          :src="visibleRight == true ? image.arrowRight : image.arrowLeft"
          key="2"
          style="float: left"
          @click="visibleRight = !visibleRight"
        />
      <div :class="visibleRight == true ? 'mapLegend_a mapLegend' : 'mapLegend_b mapLegend'">
        <span>图例</span>
        <span v-if="!visibleRight">图例</span>
        <el-switch v-model="value" class="sw" size="small" v-if="!visibleRight" />
        <div>开放
          <div class="legend" style="background: #bad4fb; border: 1px solid #2F7DF1;" />
        </div>
        <div>未开放
          <div class="legend" style="background: #cfcece; border: 1px solid #aaa9a9;" />
        </div>
        <div>选中
          <div class="legend" style="background: #fbdbb0; border: 1px solid #f59f2e;" />
        </div>
        <div>人流预警
          <div class="legend" style="background: #f8a99f; border: 1px solid #eb503c;" />
        </div>
      </div>
    </transition-group>
  </div>

  <map-control @mapLoad="mapLoadEvent" @mapClick="mapClick" />
  <edit-dialog class="dialog" :centerDialogVisible="showAreaDialogVisible" :tilte="title" :key="timer"
    :defaultButton="false" :closeOnClickModal="false" :myModal="false" :width=360>
    <template #content>
      <!-- 直接调用FilterBar组件，不再使用layoutcard组件 -->
      <FilterBar ref="setOptionsRef" :close-collapse="true" :filters="setOptions" :hasButton="false"
        :hasTableButton="hasTableButton" @on-toggle="(val: any) => $emit('on-toggle', val)" />
        <span style="float: left;width:200px;margin-left:240px;margin-top:-50px">予以警告</span>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="upSetOption()">保存</el-button>
      </span>
    </template>
  </edit-dialog>

  <div>
    <el-tooltip :visible="!showDialogVisible" class="box-item" effect="light" placement="top">
      <template #content>
       <div style="font-size: 14px; cursor: pointer;" @click="showDialogVisible = !showDialogVisible">
            <div style="padding: 0 10px 0 10px;
               margin: 10px 0;
               height: 10px;
               line-height: 10px;">
                 <img src="https://files.axshare.com/gsc/34PH56/fb/82/d2/fb82d2388cdb4ef7a60a8db4343446e7/images/安检通道监控分析/u19.svg?pageId=76a6d74b-41aa-44bc-838c-b702b827e156">
                 安检通道A30排队人数超过阈值!</div>
        </div>
      </template>
      <div class="item-red"></div>
    </el-tooltip>
    <el-tooltip :visible="showDialogVisible" effect="light" placement="top">
      <template #content>
        <div>
          <div style="font-size: 14px; cursor: pointer;user-select: none;"
            @click="showDialogVisible = !showDialogVisible">
            <div style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px; 
               margin: 10px 0;
               height: 10px;
               line-height: 10px;">排队人数预警!
            </div>
               <img src="https://files.axshare.com/gsc/34PH56/fb/82/d2/fb82d2388cdb4ef7a60a8db4343446e7/images/安检通道监控分析/u19.svg?pageId=76a6d74b-41aa-44bc-838c-b702b827e156" style="float: left;margin-top:-24px;margin-left:100px;">
            <div style="margin-top: 10px;padding: 0 10px 0 10px;font-size: 13px;">
              <span style="display: inline-block;">告警区域:</span>
              <p style="display: inline-block;padding-left: 20px;">T3航站楼 F2 A区</p>
            </div>
            <div style="margin: 10px 0px;padding: 0 10px 0 10px;font-size: 13px;">
              <span style="display: inline-block;">告警位置:</span>
              <p style="display: inline-block;padding-left: 20px;">安检通道A03</p>
            </div>
            <div style="margin: 10px 0px;padding: 0 10px 0 10px;font-size: 13px;">
              <span style="display: inline-block;">排队人数:</span>
              <p style="display: inline-block;padding-left: 20px;">31</p>
            </div>
            <div style="margin-top: 10px;padding: 0 10px 0 10px;font-size: 13px;">
              <span style="display: inline-block;">发生时间:</span>
              <p style="display: inline-block;padding-left: 20px;">2023-03-03 13:40</p>
            </div>
          </div>
        </div>
        <div>
          <div style="float: left;width:200px;margin-left:220px;margin-top:-110px">
            <!-- <video :src="videoUrl" controls height:110px; width="200px"></video> -->
            <div style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px; 
               margin: -20px 0 10px 0;
               height: 10px;
               line-height: 10px;">排队人数预警!</div>
            <div style="float:left; font-size:24px;margin-left:180px; margin-top:-30px"><el-icon color="#CCCCCC" @click="closeEdit()">
                <Close />
              </el-icon></div>
            <div style="width:200px; background:pink;height:110px"></div>
            <div style="margin-top:3px">
              <el-icon color="#409EFC" :size="20" style="margin-left:25px">
                <VideoPause />
              </el-icon>
              <el-icon color="#409EFC" :size="20" style="margin-left:10px">
                <VideoPause />
              </el-icon>
              <el-icon color="#409EFC" :size="20" style="margin-left:10px">
                <VideoPause />
              </el-icon>
              <el-icon color="#409EFC" :size="20" style="margin-left:10px">
                <VideoPause />
              </el-icon>
              <el-icon color="#409EFC" :size="20" style="margin-left:10px">
                <VideoPause />
              </el-icon>
            </div>
          </div>
        </div>
      </template>
      <div class="item-red"></div>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>

import FilterBar from '@/components/FilterBar/index.vue'
import { computed, ref, reactive, onBeforeMount, nextTick, toRaw } from 'vue'
import TableCommon from '@/components/TableCommon/index.vue'
import editDialog from '@/components/editDialog/index.vue'
import { securityColumns } from '@/views/keynote/securityCheck/config/columns'
import { tableOption, trolleyOptions, setOptions } from '@/views/keynote/securityCheck/config/filters'
import { areaDetail } from '@/config/config'
import { usePagination } from 'vue-request'
// 以下3个为地图控件相关的组件
import mapControl from '@/components/map/index.vue'
import { store } from '@/components/map/mapStore'
import { image } from '@/assets/index'
import { Cloudy, Moon } from '@element-plus/icons-vue'

const setOptionsRef=ref()
const showAreaDialogVisible = ref(false)
const showDialogVisible = ref(false);
const dialogVisible = ref(false);
const timer = ref()
const visible = ref(false)
const visibleRight = ref(false)
// 用于保存机场层级
const layer = ref()
// 用于保存选择的机场子层级
const subLayer = ref()
// 用于保存机场子层级数组
const subLayers = ref([])
// 是否显示机场子层级
const hasSub = ref(false)
const title = ref('')
const heating = ref(false)
const mapLoadEvent = () => {

}
let tool = null
const draw = (type: string) => {
  // "point"：点、"line"：线、"freeline"：自由线、 "polygon"：面
  // "circle"：圆、"curve"：弧线、"freehandarrow"：箭头、"multihead"：多箭头、"beziercurve"：bezier线、"bezierpolygon"：bezier面
  drawMap()
  tool.activate('polygon')
}

const mapClick = (evt: any) => {

  store.BNMap.removeGraphicsLayer('clickLayer')
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: 'clickLayer' })
  clickLayer.removeAll()
  // 创建点
  const point = store.BNMap.createPoint({
    x: evt.mapPoint.x,
    y: evt.mapPoint.y,
    spatialReference: evt.mapPoint.spatialReference
  })
  
}

const drawMap = () => {
  store.BNMap.removeGraphicsLayer('demo')
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: 'demo' })
  clickLayer.removeAll()
  store.BNMap.addGraphicsLayer(clickLayer)
  tool = store.BNMap.createPlot(
    {
      gl: clickLayer, // 指定操作图层
      fillSymbol: { // 设置绘制面样式
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      },
      lineSymbol: {
        color: [226, 119, 40],
        width: 2
      },
      pointSymbol: {
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 2
        }
      }
    },
    { // 参数二：绑定事件
      complete: function (e) {
       
        // 传接口只需要传递e.graphic.geometry.rings
        // 为了显示处理为字符串,字符串无需传给接口
        let temp = ''
        e.graphic.geometry.rings[0].forEach(r => {
          temp += r[0] + ',' + r[1] + ';'
        })
   
        FilterRef.value.setFieldsValue({
          drawArea: temp
        })
        console.log('绘制完成!')
      },
      start: function () {
        console.log('绘制开始!')
      }
    }
  )
}

const showFloor = (val: string[]) => {
  if (val != undefined) {
    subLayers.value = val
    hasSub.value = true
  } else {
    hasSub.value = false
  }
}
const switchMap = (name: string) => {

  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
    console.log(evt)
    console.log('回调')
  })
}
const showAreaDialog = () => {
  timer.value = new Date().getTime()
  title.value = '设置报警阈值'
  showAreaDialogVisible.value = true
}
const drawAreaOnMap = (val) => {
  const drawLayer = store.BNMap.creatGraphicsLayer({ id: 'demo' })
  drawLayer.removeAll()
  // const arr = ref([])
  // arr.value.push(val)
  const polygon = store.BNGeometry.createPolygon({
    rings: val,
    spatialReference: store.BNMap.spatialReference
  })
  const sectorsym = store.BNSymbol.polygonSymbol(
    'solid',
    store.BNSymbol.simpleLineSymbol('solid', 'rgba(11,22,33，1)', 1),
    'rgba(255,12,255,1)'
  )
  const sectorGrp = store.BNMap.graphic(polygon, sectorsym)
  sectorGrp.attributes = { NAME: 'test', DISTRICT: '还是test', ADDRESS: 'ddddddddd' }
  drawLayer.add(sectorGrp)
  store.BNMap.bindEvent(drawLayer, 'click', function (evt) {
    console.log('您单击了图层!')
    store.BNMap.highlight('drawLayer', 'demo', store.BNSymbol.simpleLineSymbol('solid', 'rgba(55,44,222，1)', 1))
  })
  store.BNMap.addGraphicsLayer(drawLayer)
}

const areaName = ref(100)

const handleEdit = row => {
  title.value = "摄像头A01";
  dialogVisible.value = true;
  drawPointOnMap(row.condition)
};

const closeEdit=()=>{
  showDialogVisible.value=false
  dialogVisible.value=false
}

/**
 * 点击列表在地图中定位安检通道口
 * @method goPointOnMap() 绘制所选行安检口的位置
 * @param row 当前行信息
 * @author 李玉霞 2023-8-8
*/
const getItem=(row:object)=>{
  goPointOnMap(row.condition)
}


/**
 * 点击列表在地图中定位安检通道口
 * @method goPointOnMap() 绘制所选行安检口的位置
 * @param areaName 阈值
 * @param setOptions 输入框信息
 * @author 唐玉林 2023-8-9
*/
const upSetOption=()=>{
  //人数阈值
  showAreaDialogVisible.value = false
  areaName.value= setOptionsRef.value.getParams().areaName
  setOptions.forEach(e=>{
  if(e.prop=="areaName"){
    e.defaultValue=areaName.value
  }
 })
  const mapPointList=thresholdData.value.filter(e=>{
    if(e.count>areaName.value){
      return true
    }
  })
  
}

// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref()
const FilterRef1 = ref()
//左弹窗查询条件信息
const FilterSearchRef = ref()
//开放安检口数量
const openNum = ref(0)
//关闭安检口数量
const closeNum = ref(0)
//左弹窗表单展示数据
const thresholdData = ref([])
//开放或者关闭安检口标识
const checked = ref("open")
//选择开放或者关闭安检口样式改变
const isCheck = ref(true)
//开放安检口原始数据
const openList = ref([
  {
    security: 'S331',
    count: '18',
    condition: {
      x: 136997.68084978886,
      y: 40515.132441773734
    }
  },
  {
    security: 'S332',
    count: '15',
    condition: {
      x: 136425.51824713036,
      y: 40546.2210456176
    }
  }
])
openNum.value = openList.value.length
thresholdData.value = openList.value
//关闭安检口原始数据
const closeList = ref([
  {
    security: 'C731',
    count: '18',
    condition: {
      x: 136416.2578119423,
      y: 40956.32601230814
    }
  },
  {
    security: 'C392',
    count: '15',
    condition: {
      x: 136997.68084978886,
      y: 40515.132441773734
    }
  }
])
closeNum.value = closeList.value.length

//右弹窗表单原始数据
const oldAlamData = ref([
  // 告警区域：
  {
    id: '1',
    title: '南指廊A区数量低于阈值',
    alamArea: 'T3航站楼 F3 A区',
    time: '2023-08-07 13:40',
    source: '0023号摄像头',
    security: "C731",
    path: ''
  },
  {
    id: '1',
    title: '国内安检通道数量低于阈值',
    alamArea: 'T3航站楼 F3 A区',
    time: '2023-03-03 13:40',
    source: '0023号摄像头',
    security: 'S332',
    path: ''
  }
])
//右弹窗查询数据
const alamData = ref()
alamData.value = oldAlamData.value
const Cancel = () => {
  showAreaDialogVisible.value = false
}
const Service = (data: ListParams) => {
  return new Promise((resolve) => {
    // 模拟数据写入，实际开发使用接口数据写入
    setTimeout(() => {
      const response = {
        params: data,
        data: {
          list: [

          ],
          total: 5
        }
      }
      resolve(response)
    }, 500)
  })
}

/**
 * 选择开放安检口还是关闭安检口
 * @param data 标识
 * @param isCheck 选择开放或者关闭安检口样式改变
 * @param checked 标识
 * @author 梁从敏 2023-8-8
 */
const openSecurity = (data: string) => {
  isCheck.value = true
  checked.value = data
  thresholdData.value = openList.value
}
const closeSecurity = (data: string) => {
  isCheck.value = false
  checked.value = data
  thresholdData.value = closeList.value
}
// =============模拟接口数据==END
const {
  run,
  data,
  loading,
  current,
  pageSize,
  total,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})
const search = ref<FilterDataType>({})
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value
  }
  run(params)
}

/**
 * 模拟右窗口查询
 * @param oldAlamData 右弹窗表单原始数据
 * @param alamData 右表单查询出来的数据
 * @param FilterRef1.value.getParams()右弹窗查询条件
 * @author 唐玉林 2023-8-8
*/
const onSearch = () => {
  const Time = FilterRef1.value.getParams().date2
  //开始时间
  const startDate = new Date(Time[0]);
  //结束时间
  const endDate = new Date(Time[1]);

  alamData.value = oldAlamData.value.filter((e: any) => {
    const checkDate = new Date(e.time);
    const regex = new RegExp(FilterRef1.value.getParams()?.security, 'i');
    if (startDate <= checkDate && checkDate <= endDate && regex.test(e.security)) {
      return true
    }
  })
}

//清空
const onReset = () => {
  alamData.value = oldAlamData.value
}

/**
 * 左表单模糊查询
 * @param {ArryObject}trolleyOptions 安检口查询
 * @param {ArryObject}thresholdData 当地表单数据
 * @param openList 开放安检口的数据
 * @param closeList 关闭安检口的数据
 * @param checked 开发安检口或关闭安检口的标识
 * @author 张真玮 2023-8-8
 */
trolleyOptions.forEach(e => {
  if (e.prop == 'areaName') {
    e.events.change = (value, evt) => {
      const regex = new RegExp(value, 'i');
      if (checked.value == "open") {
        thresholdData.value = openList.value.filter(e => {
          return regex.test(e.security)
        })
       
      } else {
        thresholdData.value = closeList.value.filter(e => {
          return regex.test(e.security)
        })
      }
    }
  }
})





/**
 * 绘制安检口点
 * @param condition 安检口坐标
 * @author 李玉霞 2023-8-8
*/
const goPointOnMap=(condition:object)=>{
  store.BNMap.removeGraphicsLayer('goPointLayer')
  store.BNMap.removeGraphicsLayer('pointLayer')
  // 向地图添加临时图层
  const goPointLayer = store.BNMap.creatGraphicsLayer({ id: 'goPointLayer' })
  goPointLayer.removeAll()
   // 创建点,
  const point = store.BNMap.createPoint({
    x: condition.x,
    y: condition.y,
    spatialReference: store.BNMap.spatialReference
  })

   // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.terminal, 20, 20)
   // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle)
   // 添加到地图
  goPointLayer.add(picgraphic)
  //地图中心移动所选安检口
  store.BNMap.setCenter(point)
  store.BNMap.addGraphicsLayer(goPointLayer)
}


/**
 * @param {object}condition 坐标
 * @param {string}html 弹窗内容
 * @author 唐玉林 2023-8-8
*/
const drawPointOnMap = (condition:Object) => {
  store.BNMap.removeGraphicsLayer('pointLayer')
  // 向地图添加临时图层
  const pointLayer = store.BNMap.creatGraphicsLayer({ id: 'point' })
  pointLayer.removeAll()
  // 创建点,
  const point = store.BNMap.createPoint({
    x: condition.x,
    y: condition.y,
    spatialReference: store.BNMap.spatialReference
  })


  //弹窗展示内容
  var html=`<div style="width:100%;">
          <div style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px; 
               margin: 10px 0 10px 0;
               height: 10px;
               line-height: 10px;">摄像头A01
          </div>
          <div style="width:100%; background:pink;height:200px"></div>
          <div style="margin-top:3px">
          
            123

          </div>
        </div>`
   //地图中心移动所选安检口
  store.BNMap.setCenter(point)
   //设置弹窗内容
  store.BNWindows.setTitle("基本信息");
  store.BNWindows.setContent(html);

  // 设置弹窗大小
  store.BNWindows.resize(280, 360);
  //展示弹窗
  store.BNWindows.show(point);
  store.BNMap.addGraphicsLayer(pointLayer)
}


const drawHeatMap = () => {
  console.log(heating.value)
  if(heating.value){
     // 模拟数组，实际开发换成接口返回的数组数据
    const heatMapList = thresholdData.value.map(({ count, condition: { x, y } }) => ({ count, x, y }));
    console.log(heatMapList)
    // 将模拟数组放入对应的方法
    console.log(store.BASE)
    store.BASE.drawHeatMap(heatMapList)
  }else{
    store.BNHeatMap.clear()
  }
}

onBeforeMount(getData)
</script>
<style lang="less" scoped>
.main-view {
  &::-webkit-scrollbar {
    display: none;
  }
}

.dialog {
  pointer-events: none;
}

.checkBackground {
  background-color: #EBF2FE;
}

.checkBackground1 {
  background-color: #F2F2F2;
}

.checkFont {
  color: blue;
}

.dialog .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}

/* 进入动画 */
.left-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}

.left-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translate(0);
  }
}

.right-enter-active {
  animation: move-right 1s;
  animation-timing-function: linear;
}

.right-leave-active {
  animation: move-right 1s reverse;
  animation-timing-function: linear;
}

@keyframes move-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translate(0);
  }
}

.drawer {
  height: 840px;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}

.drawerRight {
  width: 400px;
  position: absolute;
  top: 0;
  right: 10px;
}

.drawerLeft {
  width: 320px;
  position: absolute;
  top: 0;
  left: 0;
}

.drawer>.title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;

  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2F7DF1 2px solid;
    text-indent: 1em;
  }

  .newArea {
    float: right;
  }

  .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;

    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;

      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2F7DF1;
      }
    }

    .num:not(:first-child) {
      border-left: 1px solid #DDD;
    }
  }
}

.drawer>.content {
  line-height: 32px;
  height: 100px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  position: relative;

  /deep/ .el-form-item__label {
    text-align: right;
    margin-right: 10px;
    width: 75px !important;
    padding: 0;
    display: inline-block;
  }

  /deep/ .el-form-item {
    margin-bottom: 5px;
  }

  /deep/ .filter-wrapper {
    display: inline-block;
  }

  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 36px;
    left: 160px;
  }
}

.alamList {
  padding: 15px 0 15px 15px;
  height: 580px
}

.msgList {
  padding: 15px 0 15px 15px;
  overflow-y: scroll;
  height: 580px
}

.msgList::-webkit-scrollbar {
  display: none;
}

.listDiv {
  border: #D7D7D7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;

  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }

  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }

  .top span img {
    margin-top: 2px;
  }

  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }

  .top span:last-child {
    float: right;
    text-align: right;
  }

  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }

  .list::-webkit-scrollbar {
    display: none;
  }

  .msg {
    color: #AAA;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}

.subLayer {
  position: absolute;
  width: 35px;
  top: 100px;
  border: 0;
}

.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #FFF solid;
  padding: 10px;
}

.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}

.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}

.mapLegend {
  padding: 10px;
  width: 145px;
  background: #FFF;
  border-radius: 8px;
  position: absolute;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;

  .sw {
    margin-top: 5px;
  }

  div {
    margin-bottom: 8px;
    line-height: 24px;

    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }

    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }

    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }

  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }

  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2F7DF1;
    text-indent: 10px;
  }
}

.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}

.mapLegend_b {
  height: 190px;
  right: 10px;
  top: calc(70vh - 22px);
}

.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #FFF;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
  object-fit: none;
}

.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}

.btn_e {
  right: 0;
}

.btn_f {
  right: 410px;
}

.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btn_d {
  animation: move 0s reverse;
  left: 340px;
}

.btn_c {
  animation: move 0s reverse;
  left: 10px;
}

.btn_b {
  left: 0;
}

.btn_a {
  left: 330px;
}
</style>
